<template>
  <el-dialog title="推荐服务配置"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="70%">
    <el-form :model="serviceConfigData"
             label-position="right"
             label-width="150px">
      <el-form-item label="线下服务：">
        <el-radio-group v-model="serviceConfigData.offline">
          <el-radio label="1">全部主题</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="线上服务：">
        <el-checkbox-group v-model="serviceConfigData.recommends">
          <div v-for="(item,index) in results" :key="item"
               style="display: flex;flex-direction: column;margin-top: 20px">
            <div style="display: flex;flex-direction: row;align-items: center">
              <el-checkbox :checked="item.check" :label='item.serviceType' @change="handleCheck(index)">{{ item.name }}
              </el-checkbox>
              <div style="display: flex;flex-direction: row;align-items: center;margin-left: 30px"
                   v-if="item.serviceType==3||item.serviceType==4">
                <el-radio-group v-model="item.isPart" v-if="item.ischeck" @change="handleChangeIsPart(index)">
                  <el-radio :label="0">全部产品</el-radio>
                  <el-radio :label="1">指定产品</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div style="display: flex;flex-direction: row;align-items: center;font-size: 14px"
                 v-if="item.isPart==1&&item.ischeck">
              <p style="color: #2eb58e;margin-right: 20px">已选产品:</p>
              <div v-if="item.serviceType==3">
                <el-select v-model="item.productId"
                           clearable
                           value-key="id"
                           style="width: 220px"
                           placeholder="选择新科技">
                  <el-option v-for="item in xinkejiList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </div>

              <div v-if="item.serviceType==4">
                <el-select v-model="item.firstChildType"
                           clearable
                           value-key="id"
                           style="width: 220px"
                           @change="handleSelectTypeChange(index)"
                           placeholder="选择类型">
                  <el-option v-for="item in fengxianList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>

                <el-select v-model="item.productId"
                           clearable
                           value-key="id"
                           style="width: 220px"
                           placeholder="选择产品">
                  <el-option v-for="item in fchanpingList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </div>


            </div>
          </div>
        </el-checkbox-group>

      </el-form-item>


    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleSave()">保 存
      </el-button>
    </p>

  </el-dialog>
</template>
<script>

export default {
  name: 'serviceConfigDialog', // 病种管理
  props: {
    eventdata: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      serviceConfigData: {
        offline: '1',
        recommends: [],
      },
      results: [
        {
          serviceType: 1,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '家庭医生包',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 2,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '私人医生包',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 3,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '新科技',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 4,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '健康风险筛查',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 5,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '远程监测',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 6,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '门诊快诊',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 7,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '医院体检',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 8,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '寻医问药',
          goodsList: [],
          ischeck: false
        }, {
          serviceType: 9,
          isPart: 0,
          productId: '',
          firstChildType: '',
          positionType: '',
          name: '日常监测',
          goodsList: [],
          ischeck: false
        }],
      xinkejiList: [],
      fengxianList: [],
      fchanpingList: [],
      myData: {},
      fchanpingData: '',
      targetId: ''
    }
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    //勾选事件
    handleCheck(val) {
      var results = this.results;
      if (results[val].ischeck === true) {
        results[val].ischeck = false
      } else {
        results[val].ischeck = true
      }
    },
    //切换全部产品
    handleChangeIsPart(index){
      if (this.results[index].isPart==0){
        this.results[index].productId=''
        this.results[index].firstChildType=''
      }
    },
    handleSelectTypeChange() {
      this.fchanpingData = ''
      this.fchanpingList = []
      this.results[3].productId = ''
      this.results[3].positionType = this.fengxianList.filter(item => item.id == this.results[3].firstChildType)[0].positionType
      var firstChildType = this.results.filter(item => item.firstChildType)[0].firstChildType
      this.getPageApp(firstChildType)
    },
    handleSave() {
      var serviceTypes = this.serviceConfigData.recommends;
      var results = this.results
      var filterData = []
      for (var x in results) {
        for (var y in serviceTypes) {
          if (results[x].serviceType == serviceTypes[y]) {
            filterData.push(results[x])
          }
        }
      }
      var newData = {
        recommends: filterData,
        offline: '1'
      }

      this.myData = newData
      this.updateHealthMapRecommend()
    },
    //服务配置更新
    updateHealthMapRecommend() {
      this.loading = true
      this.myData.id = this.targetId
      this.post(this.api.healthMap.updateHealthMapRecommend, this.myData).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.modalClose()
          this.$message.success('更新成功')
        }
      })
    },
    //查询新科技
    getGoodsList() {
      this.post(this.api.healthMap.getGoodsList).then((res) => {
        if (res.data.code === '200') {
          this.xinkejiList = Object.assign({}, res.data.object)
        }
      })
    },
    //查询风险类型
    getAllTypeList() {
      this.post(this.api.healthMap.getAllTypeList).then((res) => {
        if (res.data.code === '200') {
          this.fengxianList = res.data.object
        }
      })
    },
    //查询风险产品
    getPageApp(id) {
      this.post(this.api.healthMap.getPageApp, {
        healthRiskTypeId: id,
        type: 1
      }).then((res) => {
        if (res.data.code === '200') {
          this.fchanpingList = Object.assign({}, res.data.object)
        }
      })
    },
    //服务配置详情
    getHealthMapRecommendList() {
      this.post(this.api.healthMap.getHealthMapRecommendList, {
        targetId: this.targetId
      }).then((res) => {
        if (res.data.code === '200') {
          var results = this.results;
          var object = res.data.object;
          if (object.filter(item => item.firstChildType).length > 0) {
            var firstChildType = object.filter(item => item.firstChildType)[0].firstChildType
            this.getPageApp(firstChildType)
          }
          this.serviceConfigData.recommends = object.map(item => item.serviceType)
          for (var x in results) {
            for (var y in object) {
              if (results[x].serviceType == object[y].serviceType) {
                results[x].isPart = object[y].isPart
                results[x].productId = object[y].productId
                if (object[y].firstChildType) {
                  results[x].firstChildType = object[y].firstChildType
                }
                if (object[y].positionType) {
                  results[x].positionType = object[y].positionType
                }

                results[x].ischeck = true
              }
            }
          }

        }
      })
    },


  },
  created() {
    this.targetId = this.eventdata.childId
    this.getHealthMapRecommendList()
    this.getGoodsList()
    this.getAllTypeList()
  },


}
</script>
<style scoped lang="scss">

</style>
